<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>CSS选择器</title>
        <link href="css/css_01_选择器.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <h3>标签选择器</h3><br/>
        <button>搜索</button>
        <button>登录</button>
        <h3>id选择器</h3>
        <input type="text" id="search-input">
        <h3>类选择器</h3><br/>
        <a href="" class="cata-tag">小吃快餐</a>
        <a href="" class="cata-tag">火锅</a>
        <a href="" class="cata-tag">本帮江浙菜</a>
        <!--交集选择器-->
        <p class="dq-txt"> inline-block 你可以创建很多网格来铺满浏览器</p>
        <!--后代选择器-->
        <h3>
            <strong>你可以创建很多网格来铺满浏览器</strong><br/>
            <strong>可以创建很多网格</strong>
        </h3>
        <h3>
            <strong class="sweet">可以创建很多网格</strong>
        </h3>
        <!--直接子元素选择器-->
        <h2>
            <strong>1.可以创建很多网格</strong><br/>
            <strong>2.可以创建很多网格</strong>
        </h2>

        <p class="p1">
            <span>我是span</span>
            <strong>我是第一个strong</strong>
            <strong>我是第二个strong</strong>
        </p>

        <!--属性选择器-->
        <input type="text"/>

        <h3>父子关系中的选择器:first-child</h3>
        <p class="p2">
            <span>我是span1</span>
            <label>我是label1</label>
            <span>我是span2</span>
            <span>我是span3</span>
            <span>我是span4</span>
            <span>我是span5</span>
        </p>


        <!--浮标-->
        <a href="" class="cata-tag hot">小吃快餐</a>
        <a href="" class="cata-tag hot">火锅</a>
        <a href="" class="cata-tag hot">本帮江浙菜</a>

        <input type="text" class="username">
    </body>
</html>